<%--
  Created by IntelliJ IDEA.
  User: 15458
  Date: 2025/4/17
  Time: 18:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>新增商品</title>
  <!-- 共享样式 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
  <!-- 表单验证样式 -->
  <style>
    .form-control:invalid, .form-control.is-invalid {
      border-color: #dc3545;
      padding-right: calc(1.5em + 0.75rem);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right calc(0.375em + 0.1875rem) center;
      background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }
    .invalid-feedback {
      display: none;
      width: 100%;
      margin-top: 0.25rem;
      font-size: 0.875em;
      color: #dc3545;
    }
    .was-validated .form-control:invalid ~ .invalid-feedback,
    .form-control.is-invalid ~ .invalid-feedback {
      display: block;
    }
  </style>
</head>
<body class="bg-light">
<div class="container mt-5">
  <!-- 返回导航 -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="${pageContext.request.contextPath}/product?action=list">
          <i class="bi bi-arrow-left-circle"></i> 返回列表
        </a>
      </li>
    </ol>
  </nav>

  <div class="row justify-content-center">
    <div class="col-md-8">
      <!-- 错误信息展示 -->
      <c:if test="${not empty requestScope.errorMessage}">
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            ${requestScope.errorMessage}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      </c:if>

      <!-- 新增商品表单 -->
      <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
          <h4 class="mb-0">${empty product.id ? '新增商品' : '编辑商品'}</h4>
        </div>
        <form id="productForm" method="post"
              action="${pageContext.request.contextPath}/product?action=${empty product.id ? 'save' : 'update'}"
              class="needs-validation" novalidate>
          <div class="card-body">
            <!-- 表单字段 -->
            <input type="hidden" name="id" value="${product.id}">

            <!-- 商品名称 -->
            <div class="mb-3">
              <label for="name" class="form-label">商品名称 <span class="text-danger">*</span></label>
              <input type="text" class="form-control ${not empty fieldErrors.name ? 'is-invalid' : ''}"
                     id="name" name="name"
                     value="${param.name}"
                     required
                     maxlength="100">
              <div class="invalid-feedback">
                ${not empty fieldErrors.name ? fieldErrors.name : '请输入商品名称'}
              </div>
            </div>

            <!-- 商品价格 -->
            <div class="mb-3">
              <label for="price" class="form-label">价格(元) <span class="text-danger">*</span></label>
              <div class="input-group">
                <span class="input-group-text">¥</span>
                <input type="number"
                       class="form-control ${not empty fieldErrors.price ? 'is-invalid' : ''}"
                       id="price" name="price"
                       value="${param.price}"
                       required
                       step="0.01"
                       min="0.01"
                       max="999999.99">
                <div class="invalid-feedback">
                  ${not empty fieldErrors.price ? fieldErrors.price : '价格应在0.01-999999.99之间'}
                </div>
              </div>
            </div>

            <!-- 库存数量 -->
            <div class="mb-3">
              <label for="stock" class="form-label">库存数量 <span class="text-danger">*</span></label>
              <input type="number"
                     class="form-control ${not empty fieldErrors.stock ? 'is-invalid' : ''}"
                     id="stock" name="stock"
                     value="${param.stock}"
                     required
                     min="0"
                     max="999999">
              <div class="invalid-feedback">
                ${not empty fieldErrors.stock ? fieldErrors.stock : '库存应为0-999999的整数'}
              </div>
            </div>

            <!-- 商品状态 -->
            <div class="mb-4">
              <label class="form-label">商品状态 <span class="text-danger">*</span></label>
              <div class="border rounded p-3 bg-light">
                <div class="form-check">
                  <input class="form-check-input" type="radio"
                         name="status" id="statusOn"
                         value="ON_SALE"
                  ${'ON_SALE' eq param.status ? 'checked' : ''}
                         required>
                  <label class="form-check-label text-success" for="statusOn">
                    在售
                  </label>
                </div>
                <div class="form-check mt-2">
                  <input class="form-check-input" type="radio"
                         name="status" id="statusOff"
                         value="OFF_SALE"
                  ${'OFF_SALE' eq param.status ? 'checked' : ''}>
                  <label class="form-check-label text-muted" for="statusOff">
                    下架
                  </label>
                </div>
              </div>
              <div class="invalid-feedback d-block">
                ${not empty fieldErrors.status ? fieldErrors.status : '请选择商品状态'}
              </div>
            </div>
          </div>
          <div class="card-footer bg-transparent">
            <button type="submit" class="btn btn-primary px-4">
              <i class="bi bi-save"></i> 提交保存
            </button>
            <button type="reset" class="btn btn-outline-secondary ms-2">
              <i class="bi bi-arrow-counterclockwise"></i> 重置
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 脚本区 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script>
  // 表单验证逻辑
  ;(function () {
    'use strict'

    const form = document.getElementById('productForm')

    form.addEventListener('submit', function (event) {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)

    // 动态验证价格输入
    document.getElementById('price').addEventListener('input', function(e) {
      let value = parseFloat(e.target.value)
      if (value < 0.01) {
        e.target.setCustomValidity('价格不能低于0.01元')
      } else if (value > 999999.99) {
        e.target.setCustomValidity('价格超出最大限制')
      } else {
        e.target.setCustomValidity('')
      }
    })

    // 重置表单状态
    form.querySelector('button[type="reset"]').addEventListener('click', () => {
      form.classList.remove('was-validated')
      form.reset()
    })
  })()
</script>
</body>
</html>
